<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, getCurrentInstance} from "vue"
import UploadFile from '@/components/UploadFile/index.vue';
import getRules from "@/validUtils";
import { addExtensionStaff,referrerUpdRate } from '@/api/ExtensionManage'
import { Loading } from "element-plus/es/components/loading/src/service";
import { limitInt,limitMax,limitFloat,giveFloatMin } from '@/utils/common.js'
const instance = getCurrentInstance();
// dialog弹框组件


// loading 

const addLoading = ref(false)

const handleClose = () => {
    cancel()
}
const form = ref({
    commissionRate:'', //分润比例
    
})

const props = defineProps({
    dialogVisible:{
        type:Boolean,
        default:false
    },
    backForm:{
        type:Object,
        default:() => ({})
    },
    dialogTitle:{
        type:String,
        default:''
    },
    userId:{
	type:String,
	default:''    
    },
    productId:{
	type:String,
	default:''    
    },
})

// if(props.backForm.id){
//         form.value =  props.backForm.value
//     }
onMounted(() => {
    console.log(props.backForm,'props.backForm');
    // form.value =  props.backForm
    form.value.commissionRate = props.backForm.commissionRate.toString() || '';
})

// 定义方法
const emit = defineEmits(['changeDialog','successSubmit'])
const backFile = (val) => {
    console.log(val,'val');
}

// 定义ref
const addForm = ref(null)

const cancel = () => {
    form.value = {
            commissionRate:'', 
        }
       
    // instance.proxy.$nextTick(() => {
    //     addForm.value.resetFields()
    // })
    emit('changeDialog',false)
}

// 确定
const submit = () => {
	// emit('changeDialog',false)
	// console.log(props.userId);
    addForm.value.validate(async(valid) => {
        if(valid){
            try {
                addLoading.value = true
                let data = {
                    productId:props.productId || '',
                    commissionRate:form.value.commissionRate,
		    userId:props.userId
                }
               const res = await referrerUpdRate(data)
               console.log(res);
               form.value = {
      //               userId:'',
		    // productId:'',
                    commissionRate:'',
                }
                instance.proxy.$nextTick(() => {
                    addForm.value.clearValidate() 
                })
               emit('successSubmit', false)

            } catch (error) {
                
            }finally{
                addLoading.value = false
            }
        }else{

        }
    })
    // dialogVisible.value = false
    // console.log(form.value);
}
//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

const inputChange = ()=>{
    form.value.commissionRate = giveFloatMin(form.value.commissionRate,0);
    form.value.commissionRate = limitMax(form.value.commissionRate,99);
    form.value.commissionRate = limitFloat(form.value.commissionRate);   
}
</script>

<template>
  <div class="">
    <el-dialog
            v-model="props.dialogVisible"
            :title="dialogTitle"
            width="420px"
            :before-close="handleClose"
            :close-on-click-modal=false
            align-center
            v-loading="addLoading"
        >
           <div class="dialog-main">
       
              <el-form :model="form" label-width="70px" ref="addForm">
   
     <!-- :rules="getRules('input', '分润比例')" -->
                <el-form-item label="分润比例"  >  
                    <el-input  v-model="form.commissionRate" placeholder="请输入"  @input="inputChange" />
		    <div style="margin-left: 8px;">%</div>
                </el-form-item>

               
            </el-form>
            </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submit">
                    确定
                    </el-button>
                </span>
                </template>
            </el-dialog>
  </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        margin-top: 18px;
        .el-form-item{
            margin-bottom: 16px;
            :deep(.el-input) {
                width: 260px;
            }
          
         }
    }
   :deep(.el-dialog__body){
	//    padding:0!important
   }
   :deep(.el-dialog__footer){
   	   padding-top:0!important;
	//    padding-bottom:0!important;
	//    padding-right:0!important
   }
   :deep(.dialog-main){
	   margin-top: 0!important;
   }
</style>
